<template>
  <div>
    <x-header :title="title"></x-header>
    <divider v-show="showDivider">没有查询到报名记录！</divider>
    <div class="history-list" v-for="item in ordersList" :key="item.index">
      <span>学生姓名：</span><span class="content">{{ item.studentName }}</span><br>
      <span>学生拼音：</span><span class="content">{{ item.pinYin }}</span><br>
      <span>证件类型：</span><span class="content">{{ item.idType }}</span><br>
      <span>证件编号：</span><span class="content">{{ item.idNo }}</span><br>
      <span>国籍：</span><span class="content">{{ item.country }}</span><br>
      <span>名族：</span><span class="content">{{ item.nation }}</span><br>
      <span>生日：</span><span class="content">{{ item.birth}}</span><br>
      <span>性别：</span><span class="content">{{ item.sex}}</span><br>
      <span>考试科目：</span><span class="content">{{ item.subjectName}}</span><br>
      <span>考试级别：</span><span class="content">{{ item.leavelName }}</span><br>
      <span>考级费用：</span><span class="content">{{ item.realAmount + '元' }}</span><br>
      <span>考试日期：</span><span class="content">{{ item.examDay }}</span><br>
      <span>考试地点：</span><span class="content">{{ item.examAddress }}</span><br>
      <span>支付时间：</span><span class="content">{{ item.paymentTime }}</span><br>
      <span>支付状态：</span><span style="color:#4b165e;font-size:20px;">{{ item.paymentStatus == '1' ? "未支付" : "已支付" }}</span><br>
      <x-button class="button" type="primary"  @click.native="show(item.fileName)" v-if="item.fileName != null">查看作品</x-button>
    </div>
      <x-dialog v-model="showPreview" class="dialog-demo" hide-on-blur>
        <div class="img-box">
          <img :src="imgSrc" style="max-width:100%">
        </div>
        <div @click="showPreview=false">
          <span class="vux-close"></span>
        </div>
      </x-dialog>
  </div>
</template>
<script>
import {
  XHeader,
  XButton,
  XDialog,
  Divider
} from "vux";
export default {
  components: {
    XHeader,
    XButton,
    XDialog,
    Divider
  },
  data() {
    return {
      title: "历史报名记录",
      ordersList: [],
      showPreview: false,
      imgSrc: "",
      showDivider: false
    };
  },
  created: function() {
    const vm = this;
    vm.getOrdersList();
    vm.$bridge.registerhandler("jsCloseWebPage", (data, responseCallback) => {
      history.back();
      responseCallback("0");
    });
  },
  methods: {
    getOrdersList: function() {
      const vm = this;
      this.$api
        .getOrdersList({openid:vm.$store.getters.userId})
        .then(response => {
          vm.ordersList = response;
          if (vm.ordersList.length == 0) {
            vm.showDivider = true;
          }
        })
        .catch(err => {
          console.log("出错了" + err);
        });
    },
    show: function(val) {
      const vm = this;
      vm.imgSrc = val;
      vm.showPreview = true
    }
  }
};
</script>
<style lang="less" scoped>
@import '~vux/src/styles/close';
.history-list {
  line-height: 1.8em;
  margin-top: 5px;
  margin-left: 2%;
  margin-right: 2%;
  margin-bottom: 20px;
  padding-left: 4px;
  padding-right: 2px;
  border: 1px solid #999;
  border-radius: 5px;
}
.content {
  color: #666;
}
.button {
  margin-top: 15px;
  margin-bottom: 10px;
  width: 60%;
}
.dialog-demo {
  .weui-dialog{
    border-radius: 2px;
    padding-bottom: 8px;
  }
  .dialog-title {
    line-height: 30px;
    color: #666;
  }
  .img-box {
    overflow: hidden;
  }
  .vux-close {
    margin-top: 8px;
    margin-bottom: 8px;
  }
}
@media screen and (min-width: 1024px) {
  .weui-dialog {
    width: 35%;
  }
} 
</style>
